include ../../_tableMixins

mixin adviceInfo(name, id, perfectScore, node)
  a(id=id)
  h3 #{name} (#{node.score})
  if node.score < 100
    button.hidden-small.button.button--primary(onclick='toggleRow(this);') Show/hide details
    .responsive
      table
        thead
          tr
            th Title
            th Advice
            th Score
        tbody
          each adviceName, idx in Object.getOwnPropertyNames(node.adviceList).filter(e => node.adviceList[e].score < 100)
            - const advice = node.adviceList[adviceName]
            tr(class=idx % 2 == 0 ? 'odd' : 'even')
              td(data-title='Title') #{advice.title} (#{adviceName})
              td.url(data-title='Advice') #{advice.advice}
              td.number(data-title='Score') #{advice.score}
            if (advice.offending.length > 0)
              tr.u-hideable
                td.url.offendingurl(colspan='3')
                  ul
                    each offender in advice.offending
                      li #{offender}
  else
    p #{perfectScore}

- const advice = pageInfo.data.coach.run ? pageInfo.data.coach.run.advice : pageInfo.data.coach.pageSummary.advice;

h2 Coach
p.small
  a(href='https://github.com/sitespeedio/coach') The coach
  | &nbsp;helps you find performance problems on your web page using web performance best practice rules. And gives you advice on accessibility, privacy and best practices.

script(type='text/javascript').
  function toggleRow(toggleElement) {
    const rows = toggleElement.nextSibling.getElementsByClassName("u-hideable");
    for (let i = 0; i < rows.length; ++i) {
      const status = rows[i].currentStyle ? rows[i].currentStyle.display :
                              getComputedStyle(rows[i], null).display;
      rows[i].style.display = (status === 'none') ? "table-row" : "none";
    }
  }

.row
  .column
    .row
      .four.columns
        a(href='https://github.com/sitespeedio/coach')
          img.u-max-full-width(src= assetsPath + 'img/coach.png', alt='I am the coach')
      .eight.columns
        h3 Coach score
        ul
          - sLabel = 'label normal ' + h.scoreLabel(advice.score)
          - pLabel = 'label normal ' + h.scoreLabel(advice.performance.score)
          - prLabel = 'label normal ' + h.scoreLabel(advice.privacy.score)
          - aLabel = 'label normal ' + h.scoreLabel(advice.accessibility.score)
          - bLabel = 'label normal ' +  h.scoreLabel(advice.bestpractice.score)
          li.group-item Total score&nbsp;
            span(class=sLabel) #{advice.score}
          li.group-item 
            a(href='#coach-perf') Performance score
            | &nbsp;
            span(class=pLabel) #{advice.performance.score}
          li.group-item 
            a(href='#coach-privacy') Privacy score
            | &nbsp;
            span(class=prLabel) #{advice.privacy.score}  
          li.group-item 
            a(href='#coach-access') Accessibility score
            | &nbsp;
            span(class=aLabel) #{advice.accessibility.score}
          li.group-item 
            a(href='#coach-bestpractice') Best practice score
            | &nbsp;
            span(class=bLabel) #{advice.bestpractice.score}
    .row
      .twelve.columns
        +adviceInfo('Accessibility advice', 'coach-access','You have a perfect accessibility score!', advice.accessibility)

        +adviceInfo('Performance advice','coach-perf','You have a perfect Performance score!', advice.performance)

        +adviceInfo('Best practice advice','coach-bestpractice','Your best practice score is perfect!', advice.bestpractice)

        +adviceInfo('Privacy advice','coach-privacy','Your privacy score is perfect!', advice.privacy)
    include ./pageInfo.pug
